<template>
  <div class="identification-process">
    <!-- 页面头部 -->
    <header class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">鉴定流程</h1>
          <p class="page-subtitle">{{ caseData.title }} - {{ caseData.clientName }}</p>
        </div>
        <div class="header-actions">
          <div class="case-status">
            <span class="status-label">案件编号：</span>
            <span class="status-value">{{ caseData.caseNumber }}</span>
          </div>
          <el-button @click="saveProgress">
            <i class="fas fa-save mr-2"></i>保存进度
          </el-button>
          <el-button type="primary" @click="submitIdentification">
            <i class="fas fa-check mr-2"></i>提交鉴定
          </el-button>
        </div>
      </div>
    </header>
    
    <!-- 步骤导航 -->
    <div class="steps-section">
      <div class="steps-nav">
        <div 
          v-for="(step, index) in steps" 
          :key="index"
          class="step-item"
          :class="{ 
            'completed': index < currentStep, 
            'active': index === currentStep 
          }"
        >
          <div class="step-icon">
            <i v-if="index < currentStep" class="fas fa-check"></i>
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="step-content">
            <div class="step-name">{{ step.name }}</div>
            <div class="step-desc">{{ step.description || '完成此步骤的鉴定内容' }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-section">
      <div class="content-grid">
        <!-- 流程选择区域 -->
        <div class="content-card" v-if="currentStep >= 0">
          <div class="card-header">
            <div class="card-title">
              <i class="fas fa-route"></i>
              鉴定流程选择
            </div>
          </div>
          
          <div class="process-selection">
            <div class="process-options">
              <div 
                v-for="option in processOptions" 
                :key="option.value"
                class="process-option"
                :class="{ 'selected': processData.processType === option.value }"
                @click="selectProcess(option)"
              >
                <div class="option-icon">
                  <i :class="option.icon"></i>
                </div>
                <div class="option-content">
                  <h3 class="option-title">{{ option.title }}</h3>
                  <p class="option-description">{{ option.description }}</p>
                  <div class="option-details">
                    <span class="detail-item">
                      <i class="fas fa-clock"></i>
                      {{ option.duration }}
                    </span>
                    <span class="detail-item">
                      <i class="fas fa-flag"></i>
                      {{ option.urgency }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-if="processData.processType" class="process-details">
              <h4 class="details-title">流程详情说明</h4>
              <div class="details-content">
                <p>{{ processData.processDescription }}</p>
                <div class="process-timeline">
                  <div class="timeline-item" v-for="step in currentProcessSteps" :key="step.name">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                      <h5>{{ step.name }}</h5>
                      <p>{{ step.description }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预估级别区域 -->
        <div class="content-card" v-if="currentStep >= 1">
          <div class="card-header">
            <div class="card-title">
              <i class="fas fa-stethoscope"></i>
              伤残预估
            </div>
          </div>
          
          <div class="estimate-section">
            <div class="estimate-box">
              <div class="estimate-title">是否可评伤残等级？</div>
              <div class="radio-group">
                <label class="radio-item">
                  <input type="radio" v-model="estimateData.canEvaluate" value="yes">
                  是
                </label>
                <label class="radio-item">
                  <input type="radio" v-model="estimateData.canEvaluate" value="no">
                  否
                </label>
                <label class="radio-item">
                  <input type="radio" v-model="estimateData.canEvaluate" value="pending">
                  待定
                </label>
              </div>
              
              <div class="estimate-title">预估伤残等级</div>
              <div class="level-grid">
                <div 
                  v-for="level in disabilityLevels" 
                  :key="level.value"
                  class="level-btn"
                  :class="{ 
                    'selected': estimateData.disabilityLevel === level.value,
                    'death': level.value === 'death'
                  }"
                  @click="estimateData.disabilityLevel = level.value"
                >
                  {{ level.label }}
                </div>
              </div>
            </div>
            
            <div class="estimate-box">
              <div class="estimate-title">身体部位伤残情况</div>
              
              <div v-for="(part, index) in estimateData.bodyParts" :key="index" class="form-group">
                <label class="form-label">部位{{ index + 1 }}：</label>
                <select v-model="part.location" class="form-select">
                  <option value="">请选择部位</option>
                  <option value="head">头颅颜面部</option>
                  <option value="neck">颈部</option>
                  <option value="chest">胸部</option>
                  <option value="abdomen">腹部</option>
                  <option value="spine">脊柱</option>
                  <option value="upper_left">左上肢</option>
                  <option value="upper_right">右上肢</option>
                  <option value="lower_left">左下肢</option>
                  <option value="lower_right">右下肢</option>
                  <option value="pelvis">骨盆</option>
                </select>
                <div class="level-grid" style="margin-top: 10px;">
                  <div 
                    v-for="level in ['十级', '九级', '八级', '七级', '六级']" 
                    :key="level"
                    class="level-btn"
                    :class="{ 'selected': part.level === level }"
                    @click="part.level = level"
                  >
                    {{ level }}
                  </div>
                </div>
              </div>
              
              <el-button type="primary" size="small" @click="addBodyPart" style="margin-top: 10px;">
                <i class="fas fa-plus mr-1"></i>添加部位
              </el-button>
            </div>
          </div>
          
          <!-- 预估三期区域 -->
          <div class="estimate-title" style="margin-top: 20px;">预估三期</div>
          <div class="period-section">
            <div class="period-box">
              <div class="period-title">
                <i class="fas fa-user-clock"></i>
                误工期
              </div>
              <div class="period-options">
                <div 
                  v-for="days in [180, 210, 240, 280, 300, 360, 0]" 
                  :key="'work-' + days"
                  class="period-option"
                  :class="{ 'selected': estimateData.workPeriod === days }"
                  @click="estimateData.workPeriod = days"
                >
                  {{ days === 0 ? '无' : days + '天' }}
                </div>
              </div>
            </div>
            
            <div class="period-box">
              <div class="period-title">
                <i class="fas fa-hands-helping"></i>
                护理期
              </div>
              <div class="period-options">
                <div 
                  v-for="days in [30, 60, 90, 120, 150, 180]" 
                  :key="'care-' + days"
                  class="period-option"
                  :class="{ 'selected': estimateData.carePeriod === days }"
                  @click="estimateData.carePeriod = days"
                >
                  {{ days }}天
                </div>
              </div>
            </div>
            
            <div class="period-box">
              <div class="period-title">
                <i class="fas fa-utensils"></i>
                营养期
              </div>
              <div class="period-options">
                <div 
                  v-for="days in [30, 60, 90, 120, 150, 180]" 
                  :key="'nutrition-' + days"
                  class="period-option"
                  :class="{ 'selected': estimateData.nutritionPeriod === days }"
                  @click="estimateData.nutritionPeriod = days"
                >
                  {{ days }}天
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 安排鉴定时间 -->
        <div class="content-card" v-if="currentStep >= 3">
          <div class="card-header">
            <div class="card-title">
              <i class="fas fa-calendar-alt"></i>
              安排鉴定时间
            </div>
          </div>
          
          <div class="date-section">
            <div class="date-picker">
              <label>预计安排鉴定时间：</label>
              <el-date-picker 
                v-model="scheduleData.appointmentDate" 
                type="date"
                placeholder="选择日期"
              />
            </div>
            
            <div>
              <div class="form-label">快速选择：</div>
              <div class="date-presets">
                <div 
                  v-for="preset in datePresets" 
                  :key="preset.value"
                  class="date-preset"
                  :class="{ 'selected': scheduleData.preset === preset.value }"
                  @click="selectDatePreset(preset)"
                >
                  {{ preset.label }}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 打印鉴定检材 -->
        <div class="content-card" v-if="currentStep >= 4">
          <div class="card-header">
            <div class="card-title">
              <i class="fas fa-print"></i>
              打印鉴定检材
            </div>
          </div>
          
          <ul class="print-list">
            <li v-for="material in printMaterials" :key="material.id" class="print-item">
              <input 
                type="checkbox" 
                :id="material.id" 
                v-model="material.selected"
              >
              <label :for="material.id">{{ material.name }}</label>
            </li>
          </ul>
          
          <div class="print-actions">
            <el-button @click="previewMaterials">
              <i class="fas fa-eye mr-1"></i> 预览打印材料
            </el-button>
            <el-button type="primary" @click="handlePrintMaterials">
              <i class="fas fa-print mr-1"></i> 打印选中材料
            </el-button>
          </div>
        </div>
        
        <!-- 法医鉴定区域 -->
        <div class="content-card" v-if="currentStep >= 5">
          <div class="card-header">
            <div class="card-title">
              <i class="fas fa-file-medical"></i>
              法医鉴定信息
            </div>
          </div>
          
          <div class="forensic-section">
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">鉴定日期</label>
                <el-date-picker 
                  v-model="forensicData.identificationDate" 
                  type="date"
                  placeholder="选择日期"
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">委托类型</label>
                <div class="radio-group">
                  <label class="radio-item">
                    <input type="radio" v-model="forensicData.entrustType" value="personal">
                    个人委托
                  </label>
                  <label class="radio-item">
                    <input type="radio" v-model="forensicData.entrustType" value="insurance">
                    保险委托
                  </label>
                </div>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">鉴定机构</label>
                <el-select 
                  v-model="forensicData.agency" 
                  placeholder="选择鉴定机构"
                  filterable
                  allow-create
                >
                  <el-option 
                    v-for="agency in identificationAgencies" 
                    :key="agency.value"
                    :label="agency.label" 
                    :value="agency.value"
                  />
                </el-select>
              </div>
              
              <div class="form-group">
                <label class="form-label">法医姓名</label>
                <el-input v-model="forensicData.doctorName" placeholder="输入法医姓名" />
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">鉴定项目</label>
              <div class="checkbox-group">
                <label v-for="project in identificationProjects" :key="project.value" class="checkbox-item">
                  <input type="checkbox" v-model="forensicData.projects" :value="project.value">
                  {{ project.label }}
                </label>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">预计出具报告时间</label>
                <el-select v-model="forensicData.reportTimeType">
                  <el-option label="误工期满后一个月" value="after_work_period" />
                  <el-option label="伤后7个月" value="after_7_months" />
                  <el-option label="自定义日期" value="custom" />
                </el-select>
              </div>
              
              <div class="form-group" v-if="forensicData.reportTimeType === 'custom'">
                <label class="form-label">自定义日期</label>
                <el-date-picker 
                  v-model="forensicData.customReportDate" 
                  type="date"
                  placeholder="选择日期"
                />
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">缺少的材料</label>
              <div class="material-list">
                <div v-for="material in missingMaterials" :key="material.id" class="material-item">
                  <i class="fas fa-exclamation-circle icon"></i>
                  {{ material.description }}
                </div>
              </div>
            </div>
            
            <!-- 上传鉴定材料 -->
            <div class="form-group">
              <label class="form-label">
                <i class="fas fa-upload mr-2"></i>上传鉴定材料
              </label>
              <div class="upload-section">
                <el-upload
                  v-model:file-list="forensicData.materialFiles"
                  :action="uploadAction"
                  :before-upload="beforeUpload"
                  :on-success="handleUploadSuccess"
                  :on-error="handleUploadError"
                  :on-remove="handleRemoveFile"
                  multiple
                  drag
                  accept=".pdf,.jpg,.jpeg,.png,.dcm,.zip,.rar"
                  class="upload-dragger"
                >
                  <div class="upload-content">
                    <i class="fas fa-cloud-upload-alt upload-icon"></i>
                    <div class="upload-text">
                      <p>将文件拖到此处，或<em>点击上传</em></p>
                      <p class="upload-hint">支持 PDF、图片、DICOM、压缩包格式</p>
                    </div>
                  </div>
                </el-upload>
                
                <!-- 材料分类 -->
                <div class="material-categories" v-if="forensicData.materialFiles.length > 0">
                  <h4 class="category-title">材料分类标记</h4>
                  <div 
                    v-for="(file, index) in forensicData.materialFiles" 
                    :key="index"
                    class="file-category-item"
                  >
                    <div class="file-info">
                      <i :class="getFileTypeIcon(file.name)" class="file-icon"></i>
                      <span class="file-name">{{ file.name }}</span>
                      <span class="file-size">{{ formatFileSize(file.size) }}</span>
                    </div>
                    <el-select 
                      v-model="file.category" 
                      placeholder="选择材料类型"
                      size="small"
                      class="category-select"
                    >
                      <el-option label="病历资料" value="medical_record" />
                      <el-option label="影像资料" value="medical_image" />
                      <el-option label="检查报告" value="examination_report" />
                      <el-option label="诊断证明" value="diagnosis_certificate" />
                      <el-option label="手术记录" value="surgery_record" />
                      <el-option label="康复记录" value="rehabilitation_record" />
                      <el-option label="其他材料" value="other" />
                    </el-select>
                  </div>
                </div>
                
                <!-- 材料预览 -->
                <div class="material-preview" v-if="selectedMaterial">
                  <div class="preview-header">
                    <h4>材料预览 - {{ selectedMaterial.name }}</h4>
                    <el-button size="small" @click="closeMaterialPreview">
                      <i class="fas fa-times"></i>
                    </el-button>
                  </div>
                  <div class="preview-content">
                    <img 
                      v-if="isImageFile(selectedMaterial.name)" 
                      :src="selectedMaterial.url" 
                      alt="预览图片"
                      class="preview-image"
                    />
                    <div v-else-if="isPdfFile(selectedMaterial.name)" class="pdf-preview">
                      <i class="fas fa-file-pdf text-red-500 text-4xl"></i>
                      <p>PDF文件: {{ selectedMaterial.name }}</p>
                      <el-button type="primary" @click="openPdfViewer(selectedMaterial)">
                        <i class="fas fa-eye mr-1"></i>查看PDF
                      </el-button>
                    </div>
                    <div v-else class="file-preview">
                      <i :class="getFileTypeIcon(selectedMaterial.name)" class="text-4xl"></i>
                      <p>{{ selectedMaterial.name }}</p>
                      <el-button type="primary" @click="downloadFile(selectedMaterial)">
                        <i class="fas fa-download mr-1"></i>下载文件
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">其他特殊事项沟通留言</label>
              <el-input 
                v-model="forensicData.notes" 
                type="textarea" 
                :rows="3" 
                placeholder="输入沟通事项..."
              />
            </div>
          </div>
        </div>
        
        <!-- 鉴定结论区域 -->
        <div class="content-card" v-if="currentStep >= 6">
          <div class="card-header">
            <div class="card-title">
              <i class="fas fa-file-contract"></i>
              鉴定结论
            </div>
          </div>
          
          <div class="conclusion-section">
            <div class="conclusion-grid">
              <div class="conclusion-box">
                <div class="conclusion-title">伤残等级</div>
                <div class="conclusion-value">{{ conclusionData.disabilityLevel || '未评定' }}</div>
              </div>
              <div class="conclusion-box">
                <div class="conclusion-title">误工期</div>
                <div class="conclusion-value">{{ conclusionData.workPeriod || 0 }}天</div>
              </div>
              <div class="conclusion-box">
                <div class="conclusion-title">护理期</div>
                <div class="conclusion-value">{{ conclusionData.carePeriod || 0 }}天</div>
              </div>
              <div class="conclusion-box">
                <div class="conclusion-title">营养期</div>
                <div class="conclusion-value">{{ conclusionData.nutritionPeriod || 0 }}天</div>
              </div>
              <div class="conclusion-box">
                <div class="conclusion-title">护理依赖</div>
                <div class="conclusion-value">{{ conclusionData.careDependent || '无' }}</div>
              </div>
              <div class="conclusion-box">
                <div class="conclusion-title">残疾辅助器具</div>
                <div class="conclusion-value">{{ conclusionData.assistiveDevice || '无' }}</div>
              </div>
            </div>
            
            <div class="form-group" style="margin-top: 20px;">
              <label class="form-label">预计赔偿金额</label>
              <div class="conclusion-value">¥ {{ formatCurrency(conclusionData.estimatedCompensation) }}</div>
            </div>
            
            <!-- 鉴定分析详情 -->
            <div class="form-section" style="margin-top: 30px;">
              <h4 class="section-title">
                <i class="fas fa-microscope mr-2"></i>鉴定分析详情
              </h4>
              
              <div class="form-group">
                <label class="form-label">
                  <span>鉴定分析过程</span>
                  <el-button 
                    v-if="forensicData.materialFiles.length > 0" 
                    type="text" 
                    size="small"
                    @click="extractMaterialInfo"
                    class="extract-btn"
                  >
                    <i class="fas fa-magic mr-1"></i>提取材料信息
                  </el-button>
                </label>
                <el-input 
                  v-model="conclusionData.analysis" 
                  type="textarea" 
                  :rows="6" 
                  placeholder="请输入详细的鉴定分析过程，包括检查所见、影像学表现、临床诊断等..."
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">医学依据</label>
                <el-input 
                  v-model="conclusionData.medicalBasis" 
                  type="textarea" 
                  :rows="4" 
                  placeholder="引用相关医学标准、诊断标准等..."
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">法律依据</label>
                <el-input 
                  v-model="conclusionData.legalBasis" 
                  type="textarea" 
                  :rows="3" 
                  placeholder="引用相关法律法规、司法解释等..."
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">鉴定结论</label>
                <el-input 
                  v-model="conclusionData.finalConclusion" 
                  type="textarea" 
                  :rows="4" 
                  placeholder="明确的鉴定结论..."
                />
              </div>
            </div>
          </div>
        </div>
        
        <!-- 底部操作按钮 -->
        <div class="action-bar">
          <el-button @click="saveProgress">
            <i class="fas fa-save mr-1"></i> 保存当前进度
          </el-button>
          <el-button v-if="currentStep < steps.length - 1" type="primary" @click="nextStep">
            <i class="fas fa-arrow-right mr-1"></i> 进入下一环节
          </el-button>
          <el-button v-else type="success" @click="completeIdentification">
            <i class="fas fa-check mr-1"></i> 完成鉴定
          </el-button>
        </div>
      </div>
      
        <!-- 右侧信息面板 -->
        <div class="sidebar-panel">
          <div class="info-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-bell text-amber-600"></i>
                待办事项
              </div>
            </div>
            <div class="card-content">
              <div class="reminder-list">
                <div v-for="reminder in reminders" :key="reminder.id" class="reminder-item">
                  <div class="reminder-icon">
                    <i class="fas fa-exclamation-circle text-amber-600"></i>
                  </div>
                  <div class="reminder-text">{{ reminder.content }}</div>
                </div>
              </div>
            </div>
          </div>
        
          <div class="info-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-tools text-blue-600"></i>
                快捷操作
              </div>
            </div>
            <div class="card-content">
              <div class="action-buttons">
                <el-button type="primary" size="small" @click="batchSetDate" block>
                  <i class="fas fa-calendar mr-2"></i>
                  批量设置时间
                </el-button>
                <el-button size="small" @click="batchSetPersonal" block>
                  <i class="fas fa-user-friends mr-2"></i>
                  批量设置委托
                </el-button>
                <el-button size="small" @click="batchSetAgency" block>
                  <i class="fas fa-clinic-medical mr-2"></i>
                  批量设置机构
                </el-button>
                <el-button size="small" @click="batchSetProjects" block>
                  <i class="fas fa-tasks mr-2"></i>
                  批量设置项目
                </el-button>
              </div>
            </div>
          </div>
        
          <div class="info-card">
            <div class="card-header">
              <div class="card-title">
                <i class="fas fa-file-medical-alt text-green-600"></i>
                影像资料
              </div>
            </div>
            <div class="card-content">
              <div class="action-buttons">
                <el-button type="success" size="small" @click="uploadImages" block>
                  <i class="fas fa-upload mr-2"></i>
                  上传资料
                </el-button>
                <el-button size="small" @click="viewImages" block>
                  <i class="fas fa-folder mr-2"></i>
                  查看资料
                </el-button>
                <el-button size="small" @click="shareImages" block>
                  <i class="fas fa-share-alt mr-2"></i>
                  分享给法医
                </el-button>
                <el-button size="small" @click="manageStorage" block>
                  <i class="fas fa-database mr-2"></i>
                  存储管理
                </el-button>
              </div>
            </div>
                  </div>
      </div>
    </div>
  </div>

  <!-- 打印材料预览对话框 -->
  <el-dialog 
    v-model="previewVisible" 
    title="鉴定材料打印预览" 
    width="90%" 
    :close-on-click-modal="false"
    class="print-preview-dialog"
  >
    <div class="preview-container">
      <!-- 预览设置区域 -->
      <div class="preview-settings">
        <h3 class="settings-title">
          <i class="fas fa-cog text-blue-600 mr-2"></i>
          打印设置
        </h3>
        <div class="settings-grid">
          <div class="setting-item">
            <label class="setting-label">纸张格式:</label>
            <el-select v-model="previewData.printFormat" @change="adjustPrintSettings">
              <el-option label="A4" value="A4" />
              <el-option label="A3" value="A3" />
              <el-option label="Letter" value="Letter" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">页面方向:</label>
            <el-select v-model="previewData.orientation" @change="adjustPrintSettings">
              <el-option label="纵向" value="portrait" />
              <el-option label="横向" value="landscape" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <label class="setting-label">页面选项:</label>
            <div class="checkbox-group">
              <el-checkbox v-model="previewData.includeWatermark" @change="adjustPrintSettings">
                水印
              </el-checkbox>
              <el-checkbox v-model="previewData.includeHeader" @change="adjustPrintSettings">
                页眉
              </el-checkbox>
              <el-checkbox v-model="previewData.includePageNumbers" @change="adjustPrintSettings">
                页码
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>

      <!-- 材料预览区域 -->
      <div class="materials-preview">
        <h3 class="preview-title">
          <i class="fas fa-file-alt text-green-600 mr-2"></i>
          预览材料 ({{ previewData.materials.length }} 项)
        </h3>
        
        <div class="materials-list">
          <div v-for="(material, index) in previewData.materials" :key="material.id" class="preview-material">
            <div class="material-header">
              <div class="material-info">
                <h4 class="material-title">
                  <i class="fas fa-file text-blue-500 mr-2"></i>
                  {{ material.content.title }}
                </h4>
                <div class="material-meta">
                  <span class="meta-item">
                    <i class="fas fa-file-alt mr-1"></i>
                    {{ material.pageCount }} 页
                  </span>
                  <span class="meta-item">
                    <i class="fas fa-database mr-1"></i>
                    {{ material.size }}
                  </span>
                </div>
              </div>
              <div class="material-number">{{ index + 1 }}</div>
            </div>
            
            <div class="material-content">
              <div class="content-items">
                <div v-for="(item, itemIndex) in material.content.items" :key="itemIndex" class="content-item">
                  <i class="fas fa-chevron-right text-gray-400 mr-2"></i>
                  {{ item }}
                </div>
              </div>
            </div>
            
            <!-- 预览页面效果 -->
            <div class="page-preview">
              <div class="page" :class="{ 'landscape': previewData.orientation === 'landscape' }">
                <div v-if="previewData.includeHeader" class="page-header">
                  <div class="header-left">上海法衡司法鉴定中心</div>
                  <div class="header-right">{{ new Date().toLocaleDateString() }}</div>
                </div>
                
                <div class="page-content">
                  <h3 class="document-title">{{ material.content.title }}</h3>
                  <div class="document-content">
                    <div v-for="(item, itemIndex) in material.content.items.slice(0, 3)" :key="itemIndex" class="document-item">
                      {{ item }}
                    </div>
                    <div v-if="material.content.items.length > 3" class="more-content">
                      <i class="fas fa-ellipsis-h text-gray-400"></i>
                      还有 {{ material.content.items.length - 3 }} 项内容
                    </div>
                  </div>
                </div>
                
                <div v-if="previewData.includePageNumbers" class="page-footer">
                  <div class="page-number">第 1 页，共 {{ material.pageCount }} 页</div>
                </div>
                
                <div v-if="previewData.includeWatermark" class="watermark">
                  司法鉴定专用
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <div class="footer-left">
          <span class="total-info">
            <i class="fas fa-files mr-1"></i>
            共 {{ previewData.materials.length }} 份材料，预计 {{ previewData.materials.reduce((sum, m) => sum + m.pageCount, 0) }} 页
          </span>
        </div>
        <div class="footer-right">
          <el-button @click="closePreview">
            <i class="fas fa-times mr-1"></i>
            取消
          </el-button>
          <el-button type="info" @click="downloadPreviewPdf">
            <i class="fas fa-download mr-1"></i>
            导出PDF
          </el-button>
          <el-button type="primary" @click="printPreviewMaterials">
            <i class="fas fa-print mr-1"></i>
            确认打印
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'IdentificationProcess',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const currentStep = ref(0)
    
    const steps = [
      { name: '流程选择', description: '选择鉴定流程类型' },
      { name: '预估级别', description: '评估伤残等级和身体部位' },
      { name: '预估三期', description: '评估误工、护理、营养期' },
      { name: '安排鉴定', description: '安排鉴定时间和机构' },
      { name: '打印材料', description: '准备鉴定所需材料' },
      { name: '法医鉴定', description: '执行鉴定流程' },
      { name: '鉴定结论', description: '出具鉴定报告' }
    ]
    
    const caseData = reactive({
      id: route.params.id || '1',
      title: '沪C88976机动车追尾交通事故人身损害赔偿案',
      clientName: '张某某',
      caseNumber: 'TA20240118001'
    })
    
    const disabilityLevels = [
      { label: '十级', value: 'level_10' },
      { label: '九级', value: 'level_9' },
      { label: '八级', value: 'level_8' },
      { label: '七级', value: 'level_7' },
      { label: '六级', value: 'level_6' },
      { label: '五级', value: 'level_5' },
      { label: '四级', value: 'level_4' },
      { label: '三级', value: 'level_3' },
      { label: '二级', value: 'level_2' },
      { label: '一级', value: 'level_1' },
      { label: '死亡', value: 'death' }
    ]
    
    // 流程选择数据
    const processData = reactive({
      processType: '', // 诉前、诉中、和谈
      processDescription: '',
      urgencyLevel: 'normal', // normal, urgent, expedited
      expectedDuration: 0 // 预期完成天数
    })
    
    const estimateData = reactive({
      canEvaluate: 'yes',
      disabilityLevel: 'level_10',
      bodyParts: [
        { location: 'upper', level: '九级' },
        { location: 'lower', level: '八级' }
      ],
      workPeriod: 180,
      carePeriod: 90,
      nutritionPeriod: 60
    })
    
    const scheduleData = reactive({
      appointmentDate: null,
      preset: '6months'
    })
    
    const datePresets = [
      { label: '3个月后', value: '3months' },
      { label: '6个月后', value: '6months' },
      { label: '9个月后', value: '9months' },
      { label: '1年后', value: '1year' }
    ]
    
    const printMaterials = ref([
      { id: 'idCard', name: '身份证复印件', selected: true },
      { id: 'accidentReport', name: '道路交通事故认定书', selected: true },
      { id: 'medicalRecord', name: '门急诊病历资料', selected: true },
      { id: 'hospitalRecord', name: '住院病历资料', selected: true },
      { id: 'xrayImages', name: 'X线、CT、MRI影像资料', selected: true },
      { id: 'diagnosis', name: '诊断证明书', selected: false },
      { id: 'dischargeSummary', name: '出院小结', selected: false },
      { id: 'invoices', name: '医疗费发票', selected: false },
      { id: 'vehicleInfo', name: '机动车行驶证', selected: false }
    ])
    
    const forensicData = reactive({
      identificationDate: null,
      entrustType: 'personal',
      agency: 'shanghai_faheng',
      doctorName: '',
      projects: ['disability_level', 'three_periods'],
      reportTimeType: 'after_work_period',
      customReportDate: null,
      notes: '',
      materialFiles: [] // 上传的材料文件
    })
    
    const selectedMaterial = ref(null) // 当前选中预览的材料
    const uploadAction = ref('/api/upload/materials') // 上传接口地址
    
    const identificationAgencies = [
      { label: '上海法医学会司法鉴定中心', value: 'shanghai_forensic' },
      { label: '华东政法大学司法鉴定中心', value: 'ecupl_forensic' },
      { label: '上海市公安局物证鉴定中心', value: 'shanghai_police' },
      { label: '复旦大学上海医学院司法鉴定中心', value: 'fudan_medical' },
      { label: '上海交通大学医学院司法鉴定中心', value: 'sjtu_medical' },
      { label: '上海明诚司法鉴定中心', value: 'mingcheng_forensic' }
    ]
    
    const identificationProjects = [
      { label: '伤残等级', value: 'disability_level' },
      { label: '误工/护理/营养期', value: 'three_periods' },
      { label: '护理依赖', value: 'care_dependent' },
      { label: '残疾辅助器具', value: 'assistive_device' },
      { label: '因果关系', value: 'causal_relationship' }
    ]
    
    const missingMaterials = ref([
      { id: 1, description: '误工期满的复查片（系统将在误工期满前一周自动提醒）' },
      { id: 2, description: '交通事故现场照片和示意图' },
      { id: 3, description: '车辆定损报告和维修发票' },
      { id: 4, description: '影像学检查刻盘（DICOM格式，含CT、MRI等）' },
      { id: 5, description: '驾驶证和行驶证复印件' }
    ])
    
    const conclusionData = reactive({
      disabilityLevel: '九级',
      workPeriod: 180,
      carePeriod: 90,
      nutritionPeriod: 60,
      careDependent: '无',
      assistiveDevice: '无',
      estimatedCompensation: 285600.00,  // 基于交通事故九级伤残的典型赔偿金额
      analysis: '', // 鉴定分析过程
      medicalBasis: '', // 医学依据
      legalBasis: '', // 法律依据
      finalConclusion: '' // 最终鉴定结论
    })
    
    // 流程选择相关数据
    const processOptions = ref([
      {
        value: 'pre-litigation',
        title: '诉前鉴定',
        description: '在提起诉讼前进行的鉴定，通常用于调解或和解',
        icon: 'fas fa-handshake',
        duration: '15-20个工作日',
        urgency: '正常',
        steps: [
          { name: '材料收集', description: '收集完整的医疗材料和事故证据' },
          { name: '初步评估', description: '对伤情进行初步评估和预判' },
          { name: '委托鉴定', description: '委托权威鉴定机构进行鉴定' },
          { name: '出具报告', description: '出具正式鉴定报告' }
        ]
      },
      {
        value: 'in-litigation',
        title: '诉中鉴定',
        description: '在诉讼过程中由法院委托或申请进行的鉴定',
        icon: 'fas fa-gavel',
        duration: '25-30个工作日',
        urgency: '较高',
        steps: [
          { name: '法院委托', description: '接受法院委托或当事人申请' },
          { name: '材料审查', description: '严格审查诉讼材料完整性' },
          { name: '鉴定评估', description: '按照法定程序进行鉴定' },
          { name: '法庭报告', description: '向法院提交鉴定报告' }
        ]
      },
      {
        value: 'mediation',
        title: '和谈鉴定',
        description: '为调解谈判提供鉴定依据，注重效率和实用性',
        icon: 'fas fa-comments',
        duration: '10-15个工作日',
        urgency: '高',
        steps: [
          { name: '快速收集', description: '快速收集必要的鉴定材料' },
          { name: '简化评估', description: '采用简化流程进行评估' },
          { name: '协商鉴定', description: '与各方协商鉴定方案' },
          { name: '调解报告', description: '出具适用于调解的报告' }
        ]
      }
    ])
    
    const currentProcessSteps = computed(() => {
      const option = processOptions.value.find(opt => opt.value === processData.processType)
      return option ? option.steps : []
    })
    
    const reminders = ref([
      { id: 1, content: '2024-03-20 前需要提交误工期满复查片' },
      { id: 2, content: '交通事故认定书已上传，需核实责任比例' },
      { id: 3, content: '2024-02-15 安排法医鉴定，已联系华东政法司法鉴定中心' },
      { id: 4, content: '车辆定损报告待补充，影响财产损失鉴定' },
      { id: 5, content: '需要确认是否申请护理依赖和辅助器具评估' }
    ])
    
    // 流程选择方法
    const selectProcess = (option) => {
      processData.processType = option.value
      processData.processDescription = option.description
      processData.urgencyLevel = option.urgency === '高' ? 'urgent' : (option.urgency === '较高' ? 'high' : 'normal')
      
      // 根据不同流程设置预期完成天数
      const durationMap = {
        'pre-litigation': 18, // 诉前：15-20天，取中位数18天
        'in-litigation': 27,  // 诉中：25-30天，取中位数27天
        'mediation': 12       // 和谈：10-15天，取中位数12天
      }
      processData.expectedDuration = durationMap[option.value] || 15
      
      ElMessage.success(`已选择${option.title}流程`)
    }
    
    const addBodyPart = () => {
      estimateData.bodyParts.push({ location: '', level: '' })
    }
    
    const selectDatePreset = (preset) => {
      scheduleData.preset = preset.value
      const today = new Date()
      let targetDate = new Date(today)
      
      switch (preset.value) {
        case '3months':
          targetDate.setMonth(today.getMonth() + 3)
          break
        case '6months':
          targetDate.setMonth(today.getMonth() + 6)
          break
        case '9months':
          targetDate.setMonth(today.getMonth() + 9)
          break
        case '1year':
          targetDate.setFullYear(today.getFullYear() + 1)
          break
      }
      
      scheduleData.appointmentDate = targetDate
    }
    
    // 预览相关状态
    const previewVisible = ref(false)
    const previewData = ref({
      materials: [],
      printFormat: 'A4',
      orientation: 'portrait',
      includeWatermark: true,
      includeHeader: true,
      includePageNumbers: true
    })
    
    const previewMaterials = () => {
      const selectedMaterials = printMaterials.value.filter(m => m.selected)
      
      if (selectedMaterials.length === 0) {
        ElMessage.warning('请先选择要预览的材料')
        return
      }
      
      // 生成预览数据（模拟）
      previewData.value.materials = selectedMaterials.map(material => ({
        ...material,
        content: generateMaterialContent(material),
        pageCount: Math.floor(Math.random() * 5) + 1, // 随机页数
        size: `${(Math.random() * 2 + 0.5).toFixed(1)}MB`
      }))
      
      previewVisible.value = true
    }
    
    const closePreview = () => {
      previewVisible.value = false
    }
    
    const generateMaterialContent = (material) => {
      // 根据材料类型生成模拟内容
      const contents = {
        'idCard': {
          title: '身份证复印件',
          items: ['姓名：张三', '性别：男', '民族：汉', '出生：1985年5月10日', '地址：上海市浦东新区XXX街道XXX号', '身份证号：310115198505101234']
        },
        'accidentReport': {
          title: '道路交通事故认定书',
          items: ['事故时间：2024年1月15日 14:30', '事故地点：上海市徐汇区XX路与XX路交叉口', '当事人：张三（主要责任）、李四（次要责任）', '事故形态：追尾碰撞', '责任认定：张三负主要责任，李四负次要责任']
        },
        'medicalRecord': {
          title: '门急诊病历资料',
          items: ['就诊时间：2024年1月15日 15:45', '主诉：外伤后右腿疼痛，活动受限', '体检：右小腿肿胀，压痛明显', '初步诊断：右胫腓骨骨折可能', '处理：拍片检查，石膏固定']
        },
        'hospitalRecord': {
          title: '住院病历资料',
          items: ['入院时间：2024年1月15日 16:30', '入院诊断：右胫腓骨骨折', '手术记录：切开复位内固定术', '出院时间：2024年1月25日', '出院诊断：右胫腓骨骨折术后']
        },
        'xrayImages': {
          title: 'X线、CT、MRI影像资料',
          items: ['X线片：显示右胫骨中下段横形骨折', 'CT检查：骨折线清晰，无明显移位', 'MRI检查：软组织肿胀，韧带完整', '影像学意见：符合外伤性骨折表现']
        }
      }
      
      return contents[material.id] || {
        title: material.name,
        items: [`${material.name}相关内容`, '详细信息待补充', '文件完整性良好']
      }
    }
    
    const printPreviewMaterials = () => {
      ElMessage.success('正在打印预览的材料...')
      previewVisible.value = false
    }
    
    const downloadPreviewPdf = () => {
      ElMessage.success('正在生成PDF文件...')
    }
    
    const adjustPrintSettings = () => {
      ElMessage.info('打印设置已更新')
    }
    
    const handlePrintMaterials = () => {
      const selectedMaterials = printMaterials.value.filter(m => m.selected)
      if (selectedMaterials.length === 0) {
        ElMessage.warning('请选择要打印的材料')
        return
      }
      
      ElMessage.success('正在打印选中的材料...')
    }
    
    const formatCurrency = (amount) => {
      return new Intl.NumberFormat('zh-CN').format(amount)
    }
    
    const nextStep = () => {
      if (currentStep.value < steps.length - 1) {
        currentStep.value++
        ElMessage.success(`进入${steps[currentStep.value].name}阶段`)
      }
    }
    
    const saveProgress = () => {
      ElMessage.success('当前进度已保存')
    }
    
    const completeIdentification = () => {
      ElMessage.success('鉴定流程已完成')
      router.push('/appraisal/completed')
    }
    
    // 批量操作方法
    const batchSetDate = () => {
      ElMessage.info('批量设置鉴定时间功能')
    }
    
    const batchSetPersonal = () => {
      ElMessage.info('批量设置为个人委托功能')
    }
    
    const batchSetAgency = () => {
      ElMessage.info('批量设置鉴定机构功能')
    }
    
    const batchSetProjects = () => {
      ElMessage.info('批量设置鉴定项目功能')
    }
    
    // 影像资料管理方法
    const uploadImages = () => {
      ElMessage.info('上传影像资料功能')
    }
    
    const viewImages = () => {
      ElMessage.info('查看已上传资料功能')
    }
    
    const shareImages = () => {
      ElMessage.info('分享给法医功能')
    }
    
    const manageStorage = () => {
      ElMessage.info('影像存储管理功能')
    }
    
    const submitIdentification = () => {
      ElMessage.success('鉴定已提交')
    }
    
    // 文件上传相关方法
    const beforeUpload = (file) => {
      const isValidType = /\.(pdf|jpg|jpeg|png|dcm|zip|rar)$/i.test(file.name)
      const isLt50M = file.size / 1024 / 1024 < 50
      
      if (!isValidType) {
        ElMessage.error('仅支持 PDF、图片、DICOM、压缩包格式!')
        return false
      }
      if (!isLt50M) {
        ElMessage.error('文件大小不能超过 50MB!')
        return false
      }
      return true
    }
    
    const handleUploadSuccess = (response, file) => {
      file.url = response.data.url
      file.category = 'other' // 默认分类
      ElMessage.success('文件上传成功')
    }
    
    const handleUploadError = (error, file) => {
      ElMessage.error('文件上传失败: ' + (error.message || '未知错误'))
    }
    
    const handleRemoveFile = (file) => {
      const index = forensicData.materialFiles.findIndex(f => f.uid === file.uid)
      if (index > -1) {
        forensicData.materialFiles.splice(index, 1)
      }
    }
    
    // 文件类型图标
    const getFileTypeIcon = (fileName) => {
      const ext = fileName.split('.').pop().toLowerCase()
      const iconMap = {
        pdf: 'fas fa-file-pdf text-red-500',
        jpg: 'fas fa-file-image text-blue-500',
        jpeg: 'fas fa-file-image text-blue-500',
        png: 'fas fa-file-image text-blue-500',
        dcm: 'fas fa-file-medical text-green-500',
        zip: 'fas fa-file-archive text-purple-500',
        rar: 'fas fa-file-archive text-purple-500'
      }
      return iconMap[ext] || 'fas fa-file text-gray-500'
    }
    
    // 格式化文件大小
    const formatFileSize = (size) => {
      if (!size) return '0 B'
      const units = ['B', 'KB', 'MB', 'GB']
      let index = 0
      while (size >= 1024 && index < units.length - 1) {
        size /= 1024
        index++
      }
      return `${size.toFixed(1)} ${units[index]}`
    }
    
    // 文件类型判断
    const isImageFile = (fileName) => {
      return /\.(jpg|jpeg|png|gif|bmp)$/i.test(fileName)
    }
    
    const isPdfFile = (fileName) => {
      return /\.pdf$/i.test(fileName)
    }
    
    // 材料预览
    const previewMaterial = (material) => {
      selectedMaterial.value = material
    }
    
    const closeMaterialPreview = () => {
      selectedMaterial.value = null
    }
    
    const openPdfViewer = (material) => {
      window.open(material.url, '_blank')
    }
    
    const downloadFile = (material) => {
      const link = document.createElement('a')
      link.href = material.url
      link.download = material.name
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    
    // 提取材料信息到鉴定结论
    const extractMaterialInfo = () => {
      ElMessage.info('正在分析上传的材料...')
      
      // 模拟AI分析材料提取信息的过程
      setTimeout(() => {
        let extractedAnalysis = '根据上传的材料分析：\n\n'
        
        // 根据不同类型的材料生成不同的分析内容
        forensicData.materialFiles.forEach((file, index) => {
          const category = file.category || 'other'
          const fileName = file.name
          
          switch (category) {
            case 'medical_record':
              extractedAnalysis += `${index + 1}. 病历资料分析（${fileName}）：\n`
              extractedAnalysis += '   - 患者主诉：外伤后右腿疼痛、活动受限\n'
              extractedAnalysis += '   - 既往史：否认高血压、糖尿病等慢性疾病史\n'
              extractedAnalysis += '   - 入院诊断：右胫腓骨骨折\n\n'
              break
              
            case 'medical_image':
              extractedAnalysis += `${index + 1}. 影像资料分析（${fileName}）：\n`
              extractedAnalysis += '   - X线片显示：右胫骨中下段骨折，骨折线清晰\n'
              extractedAnalysis += '   - CT检查显示：骨折端对位良好，未见明显移位\n'
              extractedAnalysis += '   - 影像学表现符合外伤性骨折特征\n\n'
              break
              
            case 'examination_report':
              extractedAnalysis += `${index + 1}. 检查报告分析（${fileName}）：\n`
              extractedAnalysis += '   - 实验室检查：血常规、生化指标基本正常\n'
              extractedAnalysis += '   - 凝血功能：PT、APTT在正常范围内\n'
              extractedAnalysis += '   - 心电图：窦性心律，未见异常\n\n'
              break
              
            case 'surgery_record':
              extractedAnalysis += `${index + 1}. 手术记录分析（${fileName}）：\n`
              extractedAnalysis += '   - 手术方式：右胫腓骨骨折切开复位内固定术\n'
              extractedAnalysis += '   - 手术过程顺利，骨折端复位满意\n'
              extractedAnalysis += '   - 术后恢复良好，伤口愈合佳\n\n'
              break
              
            default:
              extractedAnalysis += `${index + 1}. 其他材料分析（${fileName}）：\n`
              extractedAnalysis += '   - 材料内容与案件相关\n'
              extractedAnalysis += '   - 可作为鉴定参考依据\n\n'
          }
        })
        
        // 添加综合分析
        extractedAnalysis += '综合分析：\n'
        extractedAnalysis += '根据上述材料，患者因交通事故导致右胫腓骨骨折，经手术治疗后，'
        extractedAnalysis += '结合影像学资料和临床表现，符合九级伤残的评定标准。'
        
        // 自动填充医学依据和法律依据
        const medicalBasis = '1. 《人体损伤致残程度分级》GA/T 146-2019\n'
          + '2. 《道路交通事故受伤人员伤残评定》GB 18667-2002\n'
          + '3. 相关医学教科书和临床诊疗规范'
        
        const legalBasis = '1. 《中华人民共和国民法典》\n'
          + '2. 《最高人民法院关于审理人身损害赔偿案件适用法律若干问题的解释》\n'
          + '3. 《道路交通安全法》及相关司法解释'
        
        const finalConclusion = '根据鉴定，被鉴定人因本次交通事故导致的右胫腓骨骨折，'
          + '符合《人体损伤致残程度分级》中九级伤残的评定标准。'
        
        // 更新鉴定结论数据
        conclusionData.analysis = extractedAnalysis
        conclusionData.medicalBasis = medicalBasis
        conclusionData.legalBasis = legalBasis
        conclusionData.finalConclusion = finalConclusion
        
        ElMessage.success('材料信息提取完成！')
      }, 2000)
    }
    
    onMounted(() => {
      // 初始化数据
      selectDatePreset(datePresets[1]) // 默认6个月后
    })
    
    return {
      currentStep,
      steps,
      caseData,
      processData,
      processOptions,
      currentProcessSteps,
      disabilityLevels,
      estimateData,
      scheduleData,
      datePresets,
      printMaterials,
      forensicData,
      selectedMaterial,
      uploadAction,
      identificationAgencies,
      identificationProjects,
      missingMaterials,
      conclusionData,
      reminders,
      previewVisible,
      previewData,
      selectProcess,
      addBodyPart,
      selectDatePreset,
      previewMaterials,
      closePreview,
      generateMaterialContent,
      printPreviewMaterials,
      downloadPreviewPdf,
      adjustPrintSettings,
      handlePrintMaterials,
      formatCurrency,
      nextStep,
      saveProgress,
      completeIdentification,
      submitIdentification,
      batchSetDate,
      batchSetPersonal,
      batchSetAgency,
      batchSetProjects,
      uploadImages,
      viewImages,
      shareImages,
      manageStorage,
      beforeUpload,
      handleUploadSuccess,
      handleUploadError,
      handleRemoveFile,
      getFileTypeIcon,
      formatFileSize,
      isImageFile,
      isPdfFile,
      previewMaterial,
      closeMaterialPreview,
      openPdfViewer,
      downloadFile,
      extractMaterialInfo
    }
  }
}
</script>

<style scoped>
/* 现代化UI样式 - 与系统风格保持一致 */
.identification-process {
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.case-status {
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 14px;
}

.status-label {
  color: #6b7280;
  margin-right: 4px;
}

.status-value {
  color: #1f2937;
  font-weight: 500;
}

/* 步骤导航 */
.steps-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.steps-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8fafc;
  border: 2px solid transparent;
  min-width: 200px;
  flex-shrink: 0;
}

.step-item:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-item.active {
  background: #3b82f6;
  color: white;
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.step-item.completed {
  background: #10b981;
  color: white;
  border-color: #059669;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  font-weight: bold;
  flex-shrink: 0;
}

.step-item.active .step-icon,
.step-item.completed .step-icon {
  background: rgba(255, 255, 255, 0.3);
}

.step-content {
  flex: 1;
}

.step-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.3;
}

/* 主要内容区域 */
.main-section {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {
  .main-section {
    grid-template-columns: 1fr;
  }
}

.content-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 内容卡片 */
.content-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.content-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.card-title i {
  font-size: 20px;
}

/* 侧边栏面板 */
.sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-content {
  padding-top: 4px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reminder-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #fef3c7;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.reminder-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.reminder-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #92400e;
}

/* 表单元素样式 */
.estimate-section,
.period-section,
.schedule-section,
.print-section,
.identification-section,
.conclusion-section,
.forensic-section {
  padding-top: 8px;
}

.estimate-box,
.period-box,
.schedule-box,
.print-box,
.identification-box,
.conclusion-box {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.estimate-title,
.period-title,
.schedule-title,
.conclusion-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 2px solid #e5e7eb;
  background: white;
  font-weight: 500;
}

.radio-item:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.radio-item input[type="radio"] {
  margin: 0;
}

/* 等级按钮网格 */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.level-btn {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: all 0.2s ease;
}

.level-btn:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
  transform: translateY(-1px);
}

.level-btn.selected {
  background: #3b82f6;
  color: white;
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.level-btn.death {
  border-color: #ef4444;
}

.level-btn.death:hover {
  border-color: #dc2626;
  background: #fef2f2;
}

.level-btn.death.selected {
  background: #ef4444;
  border-color: #dc2626;
}

/* 时期选项 */
.period-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.period-option {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.period-option:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.period-option.selected {
  background: #3b82f6;
  color: white;
  border-color: #2563eb;
}

/* 日期选择器 */
.date-section {
  margin-bottom: 24px;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.date-picker:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.date-preset {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.date-preset:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.date-preset.selected {
  background: #3b82f6;
  color: white;
  border-color: #2563eb;
}

/* 打印材料列表 */
.print-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.print-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.print-item:hover {
  background: #f0f9ff;
  border-color: #3b82f6;
}

.print-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.print-item label {
  flex: 1;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}

/* 表单元素 */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-select {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  font-size: 14px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  margin: 0;
}

/* 结论网格 */
.conclusion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.conclusion-box {
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  text-align: center;
}

.conclusion-value {
  font-size: 18px;
  font-weight: 600;
  color: #3b82f6;
  margin-top: 8px;
}

/* 材料列表 */
.material-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: 6px;
  font-size: 14px;
  color: #92400e;
}

.material-item .icon {
  color: #f59e0b;
}

/* 操作按钮 */
.action-bar,
.print-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  margin-top: 20px;
  gap: 12px;
}

.print-actions {
  justify-content: flex-start;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .identification-process {
    padding: 16px;
  }
  
  .page-header,
  .steps-section,
  .content-card,
  .info-card {
    padding: 16px;
  }
  
  .steps-nav {
    flex-direction: column;
  }
  
  .step-item {
    min-width: auto;
  }
  
  .level-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .radio-group {
    flex-direction: column;
  }
  
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .conclusion-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 文件上传相关样式 */
.upload-section {
  margin-top: 12px;
}

.upload-dragger {
  width: 100%;
}

.upload-content {
  padding: 40px;
  text-align: center;
}

.upload-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 16px;
}

.upload-text p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}

.upload-text em {
  color: #409eff;
  font-style: normal;
}

.upload-hint {
  font-size: 12px !important;
  color: #909399 !important;
}

/* 材料分类样式 */
.material-categories {
  margin-top: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.category-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.file-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

.file-category-item:last-child {
  border-bottom: none;
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.file-icon {
  font-size: 16px;
}

.file-name {
  font-size: 14px;
  color: #374151;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #6b7280;
}

.category-select {
  width: 150px;
}

/* 材料预览样式 */
.material-preview {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.preview-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.preview-content {
  padding: 20px;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pdf-preview,
.file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pdf-preview p,
.file-preview p {
  margin: 0;
  font-size: 14px;
  color: #374151;
}

/* 提取按钮样式 */
.extract-btn {
  margin-left: 12px;
  color: #10b981 !important;
  font-size: 12px !important;
}

.extract-btn:hover {
  color: #059669 !important;
}

.extract-btn .fas {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 流程选择样式 */
.process-selection {
  padding-top: 8px;
}

.process-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.process-option {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.process-option:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.process-option.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.process-option.selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #f8fafc;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.process-option:hover .option-icon {
  background: #3b82f6;
  color: white;
  transform: scale(1.1);
}

.process-option.selected .option-icon {
  background: #3b82f6;
  color: white;
  transform: scale(1.05);
}

.option-icon i {
  font-size: 24px;
  color: #6b7280;
  transition: color 0.3s ease;
}

.process-option:hover .option-icon i,
.process-option.selected .option-icon i {
  color: white;
}

.option-content {
  flex: 1;
}

.option-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.option-description {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.option-details {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 6px;
}

.process-option.selected .detail-item {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.detail-item i {
  font-size: 10px;
}

.process-details {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

.details-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.details-content p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.process-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: -16px;
  width: 2px;
  background: #e5e7eb;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #3b82f6;
  flex-shrink: 0;
  margin-top: 2px;
}

.timeline-content {
  flex: 1;
}

.timeline-content h5 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.timeline-content p {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .process-options {
    grid-template-columns: 1fr;
  }
  
  .process-option {
    flex-direction: column;
    text-align: center;
  }
  
  .option-icon {
    align-self: center;
  }
  
  .option-details {
    justify-content: center;
  }
}

/* 表单区块样式 */
.form-section {
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

/* 打印预览对话框样式 */
.print-preview-dialog {
  border-radius: 12px;
}

.preview-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
}

/* 预览设置区域 */
.preview-settings {
  background: #f8fafc;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  border: 1px solid #e5e7eb;
}

.settings-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setting-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.checkbox-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 材料预览区域 */
.materials-preview {
  background: white;
  border-radius: 8px;
}

.preview-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #f3f4f6;
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 预览材料项 */
.preview-material {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.material-info {
  flex: 1;
}

.material-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.material-meta {
  display: flex;
  gap: 16px;
}

.meta-item {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.material-number {
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

/* 材料内容 */
.material-content {
  padding: 20px;
  background: white;
}

.content-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-item {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

/* 页面预览效果 */
.page-preview {
  padding: 20px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.page {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 20px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-height: 200px;
  max-width: 400px;
  transform: scale(0.8);
  transform-origin: center top;
}

.page.landscape {
  max-width: 600px;
  min-height: 150px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 16px;
  font-size: 12px;
  color: #6b7280;
}

.page-content {
  flex: 1;
  min-height: 120px;
}

.document-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
  text-align: center;
}

.document-content {
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
}

.document-item {
  margin-bottom: 6px;
}

.more-content {
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  margin-top: 12px;
}

.page-footer {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.page-number {
  font-size: 10px;
  color: #6b7280;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 24px;
  color: rgba(59, 130, 246, 0.1);
  font-weight: bold;
  pointer-events: none;
  z-index: 1;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 0 0;
  border-top: 1px solid #e5e7eb;
}

.footer-left {
  display: flex;
  align-items: center;
}

.total-info {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.footer-right {
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  
  .checkbox-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .material-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .material-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .dialog-footer {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .footer-right {
    justify-content: center;
  }
  
  .page {
    transform: scale(0.6);
    max-width: 300px;
  }
  
  .page.landscape {
    max-width: 450px;
  }
}

@media (max-width: 480px) {
  .preview-container {
    max-height: 60vh;
  }
  
  .preview-settings {
    padding: 16px;
  }
  
  .page {
    transform: scale(0.5);
    max-width: 250px;
  }
  
  .page.landscape {
    max-width: 350px;
  }
}
</style>